<script setup>
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
//表格数据
const tableData=ref([])
const tableDataRef=ref()
onMounted(()=>{
  getallsevation()
  getallsevationPage()
})
//表单数据
const MeetingroomRef=ref()
const UpdateMeetingRoomRef=ref()
const SearchMeetingroomRef=ref()
const UpdateMeetingRoom=reactive({
  id:'',
  department:'',
  meetingtitle:'',
  meetingroomname:'',
  starttime:'',
  endtime:'',
  participants:'',
  content:'',
  needlabel:'',
  labelcontent:'',
  meetingtype:'',
  applicant:'',
  screencasting:'',
  notes:'',
  materialupload:'',
  agendaupload:'',
  status:''
})
const Meetingroom=reactive({
  id:'',
  department:'',
  meetingtitle:'',
  meetingroomname:'',
  starttime:'',
  endtime:'',
  participants:'',
  content:'',
  needlabel:'',
  labelcontent:'',
  meetingtype:'',
  applicant:'',
  screencasting:'',
  notes:'',
  materialupload:'',
  agendaupload:'',
  status:''
})
//表单规则校验
const SearchMeetingroomRules= reactive({
  department:[
    { required: true, message: '请选择申请部门', trigger: 'blur' },
  ],
  status:[
    { required: true, message: '请选择预约状态', trigger: 'blur' },
  ]
})
const MeetingroomRules=reactive({
  department:[
    { required: true, message: '请选择申请部门', trigger: 'blur' },
  ],
  meetingtitle:[
    { required: true, message: '请输入会议题目', trigger: 'blur' },
    {max:50,message:'只能输入50个字符',trigger:'blur'},
  ],
  meetingroomname:[
    { required: true, message: '请选择会议室名称', trigger: 'blur' },
  ],
  starttime:[
    { required: true, message: '请选择计划开始时间', trigger: 'blur' },
  ],
  endtime:[
    { required: true, message: '请选择计划结束时间', trigger: 'blur' },
  ],
  participants:[
    { required: true, message: '请选择参会人数', trigger: 'blur' },
    { pattern : /^\d{1,3}$/ ,
      message: '最多输入3个字符',
      trigger: 'blur' },
  ],
  content:[
    { required: true, message: '请输入开会主要内容', trigger: 'blur' },
    {max:100,message:'只能输入100个字符',trigger:'blur'},
  ],
  needlabel:[
    { required: true, message: '请选择是否需要会标', trigger: 'blur' },
  ],
  meetingtype:[
    { required: true, message: '请选择会议类型', trigger: 'blur' },
  ],
  applicant:[
    { required: true, message: '请选择申请人', trigger: 'blur' },
  ],
  screencasting:[
    { required: true, message: '请选择是否投屏', trigger: 'blur' },
  ],
})
//搜索表单
const SearchMeetingroom=reactive({
  meetingroomname:'',
  department:'全部',
  status:'全部',
  applicant:'',
  starttime:'',
  endtime:'',
})
//分页的数据模型
const pageFormModel =reactive({
  total : '',
  size : '',
  currentPage : '',
  pages : ''
})
//分页的提交数据模型
const pageSubFormModel =reactive({
  size : '',
  currentPage : '',
})
//分页--------------------------------------------------
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val) => {
  pageSubFormModel.size=val
  //alert(`${pageSubFormModel.size} 每页条目数`)
  getallsevationPage()
}
const handleCurrentChange = (val) => {
  pageSubFormModel.currentPage=val
  //alert(`当前页: ${pageSubFormModel.current}`)
  getallsevationPage()
}
//表单新增弹框按钮
const addBtn=ref(false)
//查询按钮
const searchBtn = () => {
  getallmeetingroom()
}
const getallsevationPage = () => {
  request({
    url:'http://localhost:8092/systemdailyman/meetingreservation/getallmeetingroom',
    method:'get',
    params:pageSubFormModel,
  }).then(req=>{
    if (200==req.data.errorCode){
      tableData.value=req.data.data.records
      pageFormModel.total = req.data.data.total
      pageFormModel.size = req.data.data.size
      pageFormModel.currentPage = req.data.data.currentPage
      pageFormModel.pages = req.data.data.pages
    }
  })
}
const getallsevation = () => {
  request({
    url:'http://localhost:8092/systemdailyman/meetingreservation/getallmeetingroom',
    method:'get'
  }).then(req=>{
    if (200==req.data.errorCode){
      tableData.value=req.data.data.records
      pageFormModel.total = req.data.data.total
      pageFormModel.size = req.data.data.size
      pageFormModel.currentPage = req.data.data.currentPage
      pageFormModel.pages = req.data.data.pages
    }
  })
}
const getallmeetingroom = () => {
  SearchMeetingroomRef.value.validate((valid,fields)=> {
    if (valid) {
      request({
        url:'http://localhost:8092/systemdailyman/meetingreservation/getallmeetingreservation',
        method:'get',
        params:SearchMeetingroom
      }).then(req=>{
        if (200==req.data.errorCode){
          tableData.value=req.data.data.records
          pageFormModel.total = req.data.data.total
          pageFormModel.size = req.data.data.size
          pageFormModel.currentPage = req.data.data.currentPage
          pageFormModel.pages = req.data.data.pages
        }
      })
    }
  })
}
const meetingEdit=ref(false)
const getmeetingEdit=ref(false)
//修改按钮
const updatemeeting = (rowIndex , rowData) => {
  UpdateMeetingRoom.id=rowData.id
  UpdateMeetingRoom.status=rowData.status

  meetingEdit.value=true
}
//查看按钮
const getmeeting = (rowIndex , rowData) => {
  UpdateMeetingRoom.id=rowData.id
  UpdateMeetingRoom.department=rowData.department
  UpdateMeetingRoom.meetingtitle=rowData.meetingtitle
  UpdateMeetingRoom.meetingroomname=rowData.meetingroomname
  UpdateMeetingRoom.starttime=rowData.starttime
  UpdateMeetingRoom.endtime=rowData.endtime
  UpdateMeetingRoom.participants=rowData.participants
  UpdateMeetingRoom.content=rowData.content
  UpdateMeetingRoom.needlabel=rowData.needlabel
  UpdateMeetingRoom.labelcontent=rowData.labelcontent
  UpdateMeetingRoom.meetingtype=rowData.meetingtype
  UpdateMeetingRoom.applicant=rowData.applicant
  UpdateMeetingRoom.screencasting=rowData.screencasting
  UpdateMeetingRoom.notes=rowData.notes
  UpdateMeetingRoom.materialupload=rowData.materialupload
  UpdateMeetingRoom.agendaupload=rowData.agendaupload
  UpdateMeetingRoom.status=rowData.status

  getmeetingEdit.value=true
}
//会议室预约管理提交按钮
const Submit = () => {
  request({
    url:'http://localhost:8092/systemdailyman/meetingreservation/manupdatestatue',
    method:'put',
    headers:{'content-type':"application/json;charset:UTF-8"},
    data:UpdateMeetingRoom
  }).then(req=>{
    ElMessage({
      type: 'success',
      message: '修改成功！'
    })
    meetingEdit.value=false
    getallsevation()
  })
}
</script>

<template>
  <div class="bg">
    <el-form
        ref="SearchMeetingroomRef"
        :model="SearchMeetingroom"
        :rules="SearchMeetingroomRules"
    >
      <el-row>
        <el-col :span="8" >
          <el-form-item prop="meetingroomname" label="会议室名称">
            <el-input v-model="SearchMeetingroom.meetingroomname"  style="width: 180px" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-form-item label="部门" prop="department">
            <el-select v-model="SearchMeetingroom.department" style="width: 180px" clearable>
              <el-option label="全部" value="全部"></el-option>
              <el-option label="管理部" value="管理部"></el-option>
              <el-option label="行政部" value="行政部"></el-option>
              <el-option label="IT部" value="IT部"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-form-item prop="starttime" label="开始时间">
            <el-date-picker
                v-model="SearchMeetingroom.starttime"
                type="datetime"
                clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" >
          <el-form-item prop="status" label="预约状态">
            <el-select v-model="SearchMeetingroom.status"  style="width: 180px" clearable>
              <el-option label="全部" value="全部"></el-option>
              <el-option label="不可用" value="-1"></el-option>
              <el-option label="可用" value="1"></el-option>
              <el-option label="待审核" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-form-item prop="applicant" label="申请人">
            <el-input v-model="SearchMeetingroom.applicant"  style="width: 180px" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="endtime" label="结束时间">
            <el-date-picker
                v-model="SearchMeetingroom.endtime"
                type="datetime"
                clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" :offset="20">
          <el-button @click="searchBtn" type="primary">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" ref="tableDataRef" stripe border style="height: 100%;width:1020px;margin-top: 10px" :header-cell-style="{'text-align':'center'}">
      <el-table-column prop="id" label="编号" width="80"  v-if="false"/>
      <el-table-column prop="department" label="申请部门" width="100"  />
      <el-table-column prop="meetingtitle" label="会议题目" width="100"  />
      <el-table-column prop="meetingroomname" label="会议室名称" width="100"  />
      <el-table-column prop="starttime" label="计划开始时间" width="120"  />
      <el-table-column prop="endtime" label="计划结束时间" width="120"  />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <span v-if="scope.row.status=='-1'" style="color: red">不可用</span>
          <span v-if="scope.row.status=='1'" style="color: #4cae4c">可用</span>
          <span v-if="scope.row.status=='0'" style="color: #007bff">待反馈</span>
        </template>
      </el-table-column>
      <el-table-column prop="applicant" label="申请人" width="100"  />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="primary"   size="small"
                     @click="updatemeeting(scope.$index, scope.row)">反馈
          </el-button>
          <el-button type="success"  size="small"
                     @click="getmeeting(scope.$index, scope.row)">查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <el-pagination background
                   size="large"
                   style="margin-top: 30px;margin-left: 15%;"
                   v-model:current-page="pageFormModel.currentPage"
                   v-model:page-size="pageFormModel.size"
                   :page-sizes="[5,10]"
                   :disabled="disabled"
                   :background="background"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total=pageFormModel.total
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog
      v-model="getmeetingEdit"
      title="会议室信息"
      label-width="auto"
      :inline="true"
  >
    <el-form ref="UpdateMeetingRoomRef"
             :model="UpdateMeetingRoom"
             label-width="auto">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="department" label="申请部门">
            <el-select v-model="UpdateMeetingRoom.department" disabled placeholder="请选择申请部门" style="width: 200px"
                       clearable>
              <el-option label="管理部" value="管理部"></el-option>
              <el-option label="行政部" value="行政部"></el-option>
              <el-option label="IT部" value="IT部"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="meetingtitle" label="会议题目">
            <el-input v-model="UpdateMeetingRoom.meetingtitle" disabled placeholder="请输入会议题目"
                      style="width: 200px" clearable></el-input>
          </el-form-item>
          <el-form-item prop="meetingroomname" label="会议室名称">
            <el-select v-model="UpdateMeetingRoom.meetingroomname" disabled placeholder="请输入会议室名称"
                       style="width: 200px" clearable>
              <el-option label="会议室A" value="会议室A"></el-option>
              <el-option label="会议室B" value="会议室B"></el-option>
              <el-option label="会议室C" value="会议室C"></el-option>
              <el-option label="会议室D" value="会议室D"></el-option>
              <el-option label="会议室E" value="会议室E"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="starttime" label="计划开始时间">
            <el-date-picker
                disabled
                placeholder="请选择计划开始时间"
                v-model="UpdateMeetingRoom.starttime"
                type="datetime"
                clearable
                style="width: 200px"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item prop="endtime" label="计划结束时间">
            <el-date-picker
                disabled
                v-model="UpdateMeetingRoom.endtime"
                type="datetime"
                clearable
                style="width: 200px"
                placeholder="请选择计划结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item prop="participants" label="参会人数">
            <el-input v-model="UpdateMeetingRoom.participants" disabled type="number" placeholder="请输入参会人数"
                      style="width: 200px" clearable></el-input>
          </el-form-item>
          <el-form-item prop="content" label="开会主要内容">
            <el-input v-model="UpdateMeetingRoom.content" disabled type="textarea" placeholder="请输入开会主要内容"
                      style="width: 200px" clearable></el-input>
          </el-form-item>
          <el-form-item prop="materialupload" label="上传会议材料">
            <el-input v-model="UpdateMeetingRoom.materialupload" disabled placeholder="请上传会议材料"
                      style="width: 200px" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="needlabel" label="是否需要会标">
            <el-radio-group v-model="UpdateMeetingRoom.needlabel" disabled style="width: 200px">
              <el-radio :value="1" size="large">是</el-radio>
              <el-radio :value="0" size="large">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="labelcontent" label="会标内容">
            <el-input v-model="UpdateMeetingRoom.labelcontent" disabled placeholder="请输入会标内容" type="textarea"
                      style="width: 200px" clearable></el-input>
          </el-form-item>
          <el-form-item prop="meetingtype" label="会议类型">
            <el-select v-model="UpdateMeetingRoom.meetingtype" disabled placeholder="请选择会议类型"
                       style="width: 200px" clearable>
              <el-option label="视频会议" value="视频会议"></el-option>
              <el-option label="座谈" value="座谈"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="applicant" label="申请人">
            <el-input v-model="UpdateMeetingRoom.applicant" disabled placeholder="请输入申请人" style="width: 200px"
                      clearable></el-input>
          </el-form-item>
          <el-form-item prop="screencasting" label="是否投屏">
            <el-radio-group v-model="UpdateMeetingRoom.screencasting" disabled style="width: 200px">
              <el-radio :value="1" size="large">是</el-radio>
              <el-radio :value="0" size="large">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="notes" label="备注">
            <el-input v-model="UpdateMeetingRoom.notes" disabled placeholder="请输入备注" type="textarea"
                      style="width: 200px" clearable></el-input>
          </el-form-item>
          <el-form-item prop="agendaupload" label="上传会议议程">
            <el-input v-model="UpdateMeetingRoom.agendaupload" disabled placeholder="请上传会议议程"
                      style="width: 200px" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
  <el-dialog
      v-model="meetingEdit"
      title="预约管理"
      label-width="auto"
  >
    <el-form ref="UpdateMeetingRoomRef"
             :model="UpdateMeetingRoom"
             label-width="auto">
      <el-form-item prop="status" label="请选择会议室是否可用" style="margin-left: 25%">
        <el-radio-group v-model="UpdateMeetingRoom.status" style="width: 200px" >
          <el-radio value="1" size="large">是</el-radio>
          <el-radio value="-1" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-button type="primary" @click="Submit" >提交</el-button>
    </el-form>
  </el-dialog>
</template>

<style scoped>
.bg {
  width: 900px;
  margin-top: 50px;
  margin-left: 10%;
}
</style>